import * as echarts5 from 'echarts5'
import request from '@/utils/request'
import { ref } from 'vue'

/**
 * 列表
 * @returns {*}
 */
export function list() {
  return request({
    url: '/cloud/jcce/v1.0/kt1/getConsultationProcess',
    method: 'get'
  })
}

export default {
  name: 'consult',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    list().then((data) => {
      this.dataList = data.data
      data.data.forEach((item, index) => {
        this.renderChart(index, item.jobInfo.value, item.jobInfo.status)
      })
    }).catch((error) => {
      console.log(error)
    })
  },
  methods: {
    formatText(item) {
      return () => {
        return `${item.name}`
      }
    },
    getProgressColor(item) {
      if (item.value === 100) {
        return '#17a777'
      } else if (item.value === 0) {
        return '#f8f8fa'
      } else {
        return '#78b79e'
      }
    },
    getProgressTextColor(item) {
      if (item.value === 100) {
        return '#fff'
      } else {
        return '#585a5e'
      }
    },
    checkEnd(item, index) {
      if (item.graphInfo.length === index + 1) {
        return false
      } else {
        return true
      }
    },
    renderChart(index, value, name) {
      const chart = echarts5.init(document.getElementById('chart' + index))
      const gradient = ref({
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0, color: '#8f97b8' // 0% 处的颜色
          },
          {
            offset: 0.25, color: '#708db9' // 25% 处的颜色
          },
          {
            offset: 0.5, color: '#e2b5e0' // 75% 处的颜色
          },
          {
            offset: 0.75, color: '#8be1d6' // 100% 处的颜色
          },
          {
            offset: 1, color: '#9fe0b4' // 75% 处的颜色
          }
        ],
        global: false // 缺省为 false
      })
      const option = {
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
                color: gradient.value
              }
            },
            axisLine: {
              lineStyle: {
                width: 15
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: [
              {
                value: value,
                name: name,
                title: {
                  offsetCenter: ['0%', '0%']
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '10%']
                }
              }
            ],
            title: {
              fontSize: 28,
              color: '#5470c6'
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 30,
              color: 'inherit',
              borderColor: 'inherit',
              borderRadius: 20,
              borderWidth: 0,
              formatter: '{value}%',
              show: (name === '')
            }
          }
        ]
      }
      chart.setOption(option)
    },
    toDetail(item) {
      this.$router.push({
        name: 'consultProcessDetail',
        params: { previousPage: 'consultProcessDetail', isAdd: false, item: item, routeLevel: 3 }
      })
    }
  }
}
